<?xml version="1.0" encoding="UTF-8"?>
<!--
  Created by IntelliJ IDEA.
  User: azim
  Date: 6/4/13
  Time: 9:37 AM
-->

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        >

<ui:composition template="templates/template.xhtml">

    <ui:define name="title">Podcstr Home Page</ui:define>

    <ui:define name="left">

        <p:menuitem value="Add Podcast"
                    ajax="false"
                    action="#{podcastController.showAddForm}"/>

    </ui:define>

    <ui:define name="cbody">

        <p:dialog modal="true" widgetVar="statusDialog" header="Lodading...Please Wail.." draggable="false"
                  closable="false" resizable="false">
            <p:graphicImage value="/resources/images/progress_bar.gif"/>
        </p:dialog>

        <h2>Click On Any Of The Podcast To Listen : </h2>
        <br/>

        <h:form>
            <p:breadCrumb>
                <p:menuitem url="#"/>
                <p:menuitem value="Recent" ajax="false"
                            actionListener="#{podcastController.sort('recent')}"/>
                <p:menuitem value="Alphabetical" ajax="false"
                            actionListener="#{podcastController.sort('alphabetical')}"/>
                <p:menuitem value="Rating" ajax="false"
                            actionListener="#{podcastController.sort('rating')}"/>
            </p:breadCrumb>
        </h:form>

        <h:form>

            <p:dataGrid var="podcast"
                        value="#{podcastController.showUserPodcast()}"
                        columns="4"
                        rows="8"
                        paginator="true"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="8,12,16">

                <p:panel>

                    <h:panelGrid columns="2">

                        <p:commandLink onclick="PrimeFaces.monitorDownload(start, stop)"
                                       action="#{podcastController.listenPodcast}">

                            <f:param name="podcastName" value="#{podcast.name}"/>

                            <p:graphicImage width="60"
                                            height="60"
                                            value="#{mediaFileController.mediaFile}"
                                            alt="Podcast Album Art.">

                                <f:param name="id" value="#{podcast.albumArt.id}"/>

                            </p:graphicImage>

                        </p:commandLink>

                        <h:panelGroup style="text-align: left; font-size: 12px;">

                            <h:panelGrid columns="1">

                                <h:outputText style="font-weight: bold; font-size: 14px;" value="#{podcast.name}"/>

                                <h:panelGroup>

                                    <h:outputText value="By : "/>
                                    <p:commandLink ajax="false"
                                                   action="#{userController.showUserDetails(podcast.user.username)}">

                                        <h:outputText value="#{podcast.user.username}"/>

                                    </p:commandLink>

                                </h:panelGroup>
                                <h:outputText value="In : #{podcast.category.name}"/>


                                <p:rating readonly="true"
                                          value="#{podcast.rating}"/>

                            </h:panelGrid>

                        </h:panelGroup>

                    </h:panelGrid>

                </p:panel>

            </p:dataGrid>

        </h:form>

        <p:messages globalOnly="true"/>

    </ui:define>

</ui:composition>

</html>